<template>
  <div
    v-if="opened"
    v-dragMove="{
      DragButton: '.CreateFormTitle',
      DragWindow: '.CreateForm',
    }"
  >
    <div class="window CreateForm">
      <div
        :class="[
          'title-bar',
          'CreateFormTitle',
          titleBarInactive ? 'inactive' : '',
        ]"
      >
        <img class="title-bar-img" src="@/assets/win98icons/notepad-5.png" />
        <div class="title-bar-text">
          {{ createInput.equipment }} Issue Report @{{ createInput.date }}
          {{ createInput.time }}
        </div>
        <div class="title-bar-controls">
          <button aria-label="Close" @click="close()"></button>
        </div>
      </div>
      <div class="window-body">
        <div class="field-row-stacked">
          <label for="text_description">Issue Description</label>
          <textarea
            id="text_description"
            rows="4"
            style="resize: none"
            v-model="userInput.description"
            placeholder="请输入问题描述"
          ></textarea>
        </div>
        <div class="field-row-stacked">
          <label for="text_requirement">Requirements or Advices</label>
          <textarea
            id="text_requirement"
            rows="4"
            style="resize: none"
            v-model="userInput.requirement"
            placeholder="请输入修改需求或建议"
          ></textarea>
        </div>
        <!-- <pre>{{ input }}</pre> -->
        <div
          class="inline-container"
          style="margin-top: 12px; justify-content: space-between"
        >
          <div class="field-row inline">
            <label for="text_name">Name</label>
            <input
              id="text_name"
              type="text"
              placeholder="请填写上报人姓名"
              v-model="userInput.name"
            />
          </div>
          <div class="field-row inline">
            <input
              checked
              type="checkbox"
              id="checkbox_report"
              v-model="userInput.reported"
            />
            <label for="checkbox_report">已报技保/网络</label>
          </div>
          <div class="field-row">
            <input
              checked
              type="checkbox"
              id="checkbox_replied"
              v-model="userInput.replied"
            />
            <label for="checkbox_replied">技保/网络已回复</label>
          </div>
        </div>
        <div class="field-row-stacked">
          <label for="text_reply">Replied Information</label>
          <textarea
            id="text_reply"
            rows="4"
            style="resize: none"
            v-model="userInput.reply"
            placeholder="请输入网络/技保部门的回复"
            :disabled="!userInput.replied"
          ></textarea>
        </div>
        <div
          class="inline-container"
          style="margin-top: 12px; justify-content: center"
        >
          <button @click="handleConfirm()">Submit</button>
        </div>
      </div>
    </div>
  </div>
  <div
    class="modal-cover"
    v-if="opened"
    @click="handleModalClick()"
    :userInput="userInput"
  ></div>
  <CreateAlert
    ref="createAlert"
    :userInput="userInput"
    @close="titleBarInactive = false"
    @yes="close()"
  />
</template>

<script setup>
import CreateAlert from "./CreateAlert.vue";
import { ref, computed, nextTick, onMounted, onUnmounted, h } from "vue";
import useSeatStore from "@/store/seat.js";
const createAlert = ref();
const seatStore = useSeatStore();
const opened = ref(false);
const createInput = ref(null);
const open = (createInputValue) => {
  createInput.value = JSON.parse(JSON.stringify(createInputValue));
  userInput.value.equipment = createInput.value.equipment;
  userInput.value.eventTime =
    createInput.value.date + " " + createInput.value.time;
  userInput.value.description = "";
  userInput.value.requirement = "";
  userInput.value.reported = true;
  userInput.value.name = getUser();
  opened.value = true;
};
const close = () => {
  emit("close");
  opened.value = false;
};

defineExpose({ open, close });
const emit = defineEmits(["close"]);

const userInput = ref({
  equipment: "",
  eventTime: "",
  description: "",
  requirement: "",
  reported: 1,
  replied: 0,
  reply: "",
  name: "",
});

const getUser = () => {
  let userName = "";
  seatStore.seatStatusFull.forEach((seat) => {
    if (seat.seatName == seatStore.currentSeat.seatName) {
      seat.users.forEach((user) => {
        console.log(seat, user);
        if (
          user.qualification == "全放单" &&
          (seat.seatType == "通报协调" ||
            user.seatPost == "协调岗" ||
            user.seatPost == "带班主任岗")
        ) {
          userName = user.userName;
        }
      });
    }
  });
  return userName;
};

const handleConfirm = () => {
  createAlert.value.open();
  titleBarInactive.value = true;
};

const titleBarInactive = ref(false);
let modalClickTimer = null;
let modalClickCounter = 0;
const handleModalClick = () => {
  modalClickCounter = 0;
  modalClickTimer = setInterval(() => {
    titleBarInactive.value = !titleBarInactive.value;
    modalClickCounter++;
    if (modalClickCounter >= 10) {
      titleBarInactive.value = false;
      clearInterval(modalClickTimer);
    }
  }, 50);
};
</script>

<style scoped>
@import "@/styles/98.css";
@import "@/styles/98custom.css";

.CreateForm {
  width: 100%;
  max-width: 480px;
  /* height: 330px; */
  left: 120px;
  top: 100px;
  z-index: 3;
}
</style>
